<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>各省份疫情信息堆叠图</title>
    <script src="../static/echarts.min.js"></script>
</head>
<body>
<div id="main" style="width:1000px;height:400px"></div>
<script type="text/javascript">
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('main'));

      var province = [{% for item in province %}'{{ item }}',{% endfor %}];
      var all = [{% for item in all %}{{ item }},{% endfor %}];
      var add = [{% for item in add %}{{ item }},{% endfor %}];
      var cure = [{% for item in cure %}{{ item }},{% endfor %}];
      var exist = [{% for item in exist %}{{ item }},{% endfor %}];
      var dead = [{% for item in dead %}{{ item }},{% endfor %}];

      option = {
      title: {
        text: '各省份疫情信息堆叠图'
      },
      tooltip: {
        trigger: 'axis'
      },
      legend: {

      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      toolbox: {
        feature: {
          saveAsImage: {}
        }
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: province,
        axisLabel:{
           interval:0,
           rotate:40
        }
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          name: '新增',
          type: 'line',
          stack: 'Total',
          data: add
        },
        {
          name: '累计',
          type: 'line',
          stack: 'Total',
          data: all
        },
        {
          name: '现有',
          type: 'line',
          stack: 'Total',
          data: exist
        },
        {
          name: '治愈',
          type: 'line',
          stack: 'Total',
          data: cure
        },
        {
          name: '死亡',
          type: 'line',
          stack: 'Total',
          data: dead
        }
      ]
};

      myChart.setOption(option);



</script>

</body>
</html>